import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
  Card,
  message,
  Tabs,
  Form,
  Input,
  Button,
  Row,
  Col,
  InputNumber,
  Space,
  Modal,
  Upload,
} from 'antd';
import { connect } from 'umi';
import request from '@/utils/request';
import ImgQuick from '@/pages/admin/imgQuick';
import UploadUtil from '@/components/UploadUtil';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';

const { TabPane } = Tabs;
const apiURL = '/api/services/app/SysConfig/';
const currentControl = 'SysConfig';
class ViewSysConfig extends React.Component<any, any> {
  constructor(props: Readonly<{}>) {
    super(props);
    this.state = {
      loading: false,
      visible: false,
      checked: false,
      checkedSoMsg: false,
      checkedRcvMsg: false,
      data: {},
      fileList: [],
    };
  }
  formRef: any = React.createRef();
  componentDidMount() {
    this.getObj();
  }
  getObj = () => {
    this.setState({ loading: true });
    request(apiURL + 'GetConfig', {
      method: 'GET',
    }).then((response) => {
      if (response.result) {
        const company = response.result;
        const fileList: any = [];
        if (company.logo) {
          const obj = {
            uid: company.logo,
            name: company.logo,
            response: {
              result: company.logo,
            },
            status: 'done',
            url: UploadUtil.getOssFile + company.logo,
          };
          fileList.push(obj);
        }
        this.formRef.current.setFieldsValue({ company });
        this.setState({ data: company, fileList, logo: company.logo });
      } else {
        message.warning('暂无配置');
      }
      this.setState({ loading: false });
    });
  };
  onFinish = (values: any) => {
    this.setState({ loading: true });
    const act = values.company.id === 0 || !values.company.id ? 'Abp/create' : 'Abp/update';
    values.company.logo = this.state.logo;
    this.props
      .dispatch({
        type: act,
        payload: values.company,
        control: currentControl,
      })
      .then(() => {
        const resp = this.props.response;
        if (resp.result) {
          message.success('保存成功！');
          this.setState({ data: this.props.response.result });
        }
        this.setState({ loading: false });
      });
  };
  clickFun = (val: any) => {
    const fileList = [];
    const obj = {
      uid: val,
      name: val,
      response: {
        result: val,
      },
      status: 'done',
      url: UploadUtil.getOssFile + val,
    };
    fileList.push(obj);
    this.setState({
      logo: val,
      fileList,
      visible4: false,
    });
  };
  handleUploadList = (info: any) => {
    if (info.file.status == 'error') {
      message.error(info.file.response.error.message);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 上传成功`);
    }
    this.setState({ fileList: info.fileList });
  };
  render() {
    const { loading, data, fileList, loading2 } = this.state;
    const layout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
    };
    const uploadButton = (
      <div>
        {loading2 ? <LoadingOutlined /> : <PlusOutlined />}
        <div className="ant-upload-text">上传图片</div>
      </div>
    );
    return (
      <PageHeaderWrapper title={false} breadcrumbRender={false} ghost>
        <Form {...layout} ref={this.formRef} onFinish={this.onFinish}>
          <Card
            title="运营设置"
            extra={
              <Space>
                <Button type="primary" htmlType="submit" loading={loading}>
                  保存
                </Button>
                <Button type="primary" onClick={this.getObj} loading={loading}>
                  刷新
                </Button>
              </Space>
            }
          >
            <Tabs defaultActiveKey="1">
              <TabPane tab="全局配置" key="1">
                <Row gutter={[16, 16]}>
                  <Col span={12}>
                    <Form.Item name={['company', 'id']} label="ID" hidden>
                      <Input disabled style={{ width: 50 }} />
                    </Form.Item>
                    <Form.Item
                      name={['company', 'companyName']}
                      label="公司名称"
                      rules={[{ required: true, message: '公司名称必填' }]}
                    >
                      <Input style={{ width: 200 }} />
                    </Form.Item>
                    <Form.Item name={['company', 'address']} label="地址">
                      <Input />
                    </Form.Item>
                    <Form.Item name={['company', 'telphone']} label="电话">
                      <Input style={{ width: 200 }} />
                    </Form.Item>
                    <Form.Item name={['company', 'email']} label="邮箱">
                      <Input style={{ width: 200 }} />
                    </Form.Item>
                    <Form.Item name={['company', 'fax']} label="传真">
                      <Input style={{ width: 200 }} />
                    </Form.Item>
                    <Form.Item label="企业图标">
                      <Input.Group compact>
                        <Form.Item>
                          <Upload
                            action={UploadUtil.uploadOSS}
                            headers={{
                              Authorization: UploadUtil.accessToken,
                            }}
                            data={{
                              objectId: data?.id,
                              objectName: 'SysConfig',
                              objectField: 'logo',
                            }}
                            listType="picture-card"
                            fileList={fileList}
                            multiple={true}
                            onChange={this.handleUploadList}
                          >
                            {fileList.length >= 1 ? null : uploadButton}
                          </Upload>
                        </Form.Item>
                        <Form.Item>
                          <Button onClick={() => this.setState({ visible4: true })}>
                            选择图片
                          </Button>
                        </Form.Item>
                      </Input.Group>
                    </Form.Item>
                  </Col>
                </Row>
              </TabPane>

              <TabPane tab="业务设置" key="3">
                <Row>
                  <Col span={12}>
                    <Form.Item name={['company', 'jobNumPre']} label="单号前缀">
                      <Input />
                    </Form.Item>
                    <Form.Item name={['company', 'startJobNum']} label="起始单号">
                      <InputNumber min={1000} disabled={data.startJobNum > 0} />
                    </Form.Item>
                    <Form.Item name={['company', 'wxAppID']} label="微信AppId">
                      <Input />
                    </Form.Item>
                    <Form.Item name={['company', 'wxAppSecret']} label="微信AppSecret">
                      <Input />
                    </Form.Item>
                  </Col>
                  <Col span={12}></Col>
                </Row>
              </TabPane>
            </Tabs>
          </Card>
        </Form>
        <Modal
          title="图片选择"
          visible={this.state.visible4}
          destroyOnClose={true}
          onCancel={() => this.setState({ visible4: false })}
          width={750}
          footer={false}
        >
          <ImgQuick clickFun={(val: any) => this.clickFun(val)} ext=".jpg,.jpeg,.png,.gif" />
        </Modal>
      </PageHeaderWrapper>
    );
  }
}
export default connect(({ Abp }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
}))(ViewSysConfig);
